<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/10/15
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>主页</title>
</head>
<style>
    a {
        text-decoration: none;
    }

    a:visited {
        color: sandybrown;
        text-decoration: line-through;
    }
    a:hover {
        color: blue;
        text-decoration: underline;
    }
    input{
        background-color: aqua;
    }
</style>
<body style="background-image: url('/img/002.png');
    background-size: cover; background-repeat: no-repeat; background-position: center;">
    <center>
        <hr style="width: 100%;height: 2px"/>
        <div style="width: 200px;height: 40px;margin-top: 30px;margin-bottom: 20px;
            background-color:deepskyblue;border-radius: 20px;">
            <h2>学生列表</h2>
        </div>
        <form id="f1" action="${pageContext.request.contextPath}/user/pageStudent.do" method="get">
            <input type="button" value="重置" id="cl">
            <input type="text" style="background-color: rgba(0,0,0,0)" name="likeName" id="likeName" placeholder="请输入关键字查询" value="${likeName}">
            <input type="hidden" name="pageNum" id="page">
            <input type="hidden" name="pageSize" id="pageSize">
            <input type="submit" value="查询">
        </form>
        <table border="1" cellspacing="0" width="1400" bgcolor="#faebd7">
            <tr style="text-align: center;">
                <td style="width: 45px">
                    <input type="button" id="qx" value="全选">
                    <input type="button" id="qk" value="清空">
                    <input type="button" id="fx" value="反选">
                </td>
                <th style="width: 100px">姓名</th>
                <th style="width: 50px">性别</th>
                <th style="width: 130px">照片</th>
                <th style="width: 150px">爱好</th>
                <th style="width: 500px">简介</th>
                <th style="width: 80px">身高</th>
                <th style="width: 150px">学院</th>
                <th style="width: 100px">社团</th>
            </tr>
            <c:forEach var="item" items="${pageInfo.list}">
                <tr style="text-align: center;">
                    <td>
                        <input type="checkbox" name="ck" value="${item.id}">
                    </td>
                    <td>${item.name}</td>
                    <td>${item.gender}</td>
                    <td><img src="${pageContext.request.contextPath}/img/${item.photo}"
                             height="125px"></td>
                    <td>${item.hobby}</td>
                    <td>${item.introduction}</td>
                    <td>${item.height}cm</td>
                    <td>${item.schoolList[1].sname}</td>
                    <td>${item.schoolList[0].sname}</td>
                </tr>
            </c:forEach>
        </table>

        <button onclick="go(1)">首页</button>
        <c:if test="${pageInfo.hasPreviousPage}">
            <button onclick="go(${pageInfo.prePage})">上一页</button>
        </c:if>

        <c:choose>
            <c:when test="${pageInfo.pages<10}">
                <c:set var="begin" value="1"></c:set>
                <c:set var="end" value="${pageInfo.pages}"></c:set>
            </c:when>
            <c:otherwise>
                <c:set var="begin" value="${pageInfo.pageNum-5}"></c:set>
                <c:set var="end" value="${pageInfo.pageNum+4}"></c:set>
                <c:if test="${begin<1}">
                    <c:set var="begin" value="1"></c:set>
                    <c:set var="end" value="10"></c:set>
                </c:if>
                <c:if test="${end>pageInfo.pages}">
                    <c:set var="begin" value="${pageInfo.pages-9}"></c:set>
                    <c:set var="end" value="${pageInfo.pages}"></c:set>
                </c:if>
            </c:otherwise>
        </c:choose>

        <c:forEach var="i" begin="${begin}" end="${end}">
            <c:choose>
                <c:when test="${pageInfo.pageNum==i}">
                    <a>/${i}</a>
                </c:when>
                <c:otherwise>
                    <a href="javascript:go(${i})">/${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>

        <c:if test="${pageInfo.hasNextPage}">
            <button onclick="go(${pageInfo.nextPage})">下一页</button>
        </c:if>
        <button onclick="go(${pageInfo.pages})">尾页</button><br/>

        <div style="color: black">
            第${pageInfo.pageNum}页/共${pageInfo.pages}页 共${pageInfo.total/2}条数据
        </div>
    </center>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
<script>
    var checkbox = document.getElementsByName("ck");
    function go(selectPage){//翻页
        var page = document.getElementById("page");//读取当前页
        page.value=selectPage;//将要跳转的页赋过去
        var pageSize = document.getElementById("pageSize");//读取当前每页分的数量
        pageSize.value=${pageInfo.pageSize/2};//将当前分页赋过去
        var form = document.getElementById("f1");
        form.submit();
    }
    $("#qx").click(function (){
        for(var i=0;i<checkbox.length;i++){
            checkbox[i].checked=true
        }
    })
    $("#qk").click(function (){
        for(var i=0;i<checkbox.length;i++){
            checkbox[i].checked=false
        }
    })
    $("#fx").click(function (){
        for(var i=0;i<checkbox.length;i++){
            checkbox[i].checked=!checkbox[i].checked
        }
    })
</script>
</html>